{% block sw_settings_product_feature_sets_modal %}
<sw-modal
    :title="$tc('sw-settings-product-feature-sets.modal.labelTitleModal')"
    class="sw-settings-product-feature-sets__modal"
    @modal-close="$emit('modal-close')"
>

    {% block sw_settings_product_feature_sets_modal_first_page %}
    <template v-if="showPageOne">
        <sw-radio-field
            v-model:value="selectedFeatureType"
            :label="$tc('sw-settings-product-feature-sets.modal.labelTitlePageOne')"
            block
            class="sw-settings-product-feature-sets-modal__options"
            identification="fieldType"
            :options="settingOptions"
            @update:value="onChangeOption"
        />
    </template>
    {% endblock %}

    {% block sw_settings_product_feature_sets_modal_custom_field_list %}
    <template v-if="showCustomField">

        {% block sw_settings_product_feature_sets_modal_custom_field_list_toolbar %}
        <div class="sw-product-feature-set-modal-custom-field-list__toolbar">

            {% block sw_settings_product_feature_sets_modal_custom_field_list_toolbar_search %}
            <sw-simple-search-field
                v-model:value="term"
                size="small"
                variant="form"
                @search-term-change="onSearchCustomFields"
            />
            {% endblock %}

        </div>
        {% endblock %}

        <sw-data-grid
            ref="customFieldGrid"
            :data-source="customFields"
            :columns="customFieldColumns"
            :show-selection="true"
            :show-actions="false"
            :is-loading="valuesLoading"
            identifier="sw-product-feature-set-modal-custom-field-list"
            @selection-change="setFeatureSelection"
        >

            {% block sw_settings_product_feature_sets_modal_custom_field_list_column_name %}
            <template #column-name="{ item }">
                {{ readCustomFieldLabel(item) }}
            </template>
            {% endblock %}

            {% block sw_settings_product_feature_sets_modal_custom_field_list_column_type %}
            <template #column-type="{ item }">
                {{ item.type }}
            </template>
            {% endblock %}

            {% block sw_settings_product_feature_sets_modal_custom_field_list_pagination %}
            <template #pagination>
                <sw-pagination
                    v-if="customFieldTotal > customFieldCriteria.limit"
                    :total="customFieldTotal"
                    :limit="customFieldCriteria.limit"
                    :page="customFieldCriteria.page"
                    :auto-hide="false"
                    @page-change="paginateCustomFieldGrid"
                />
            </template>
            {% endblock %}

        </sw-data-grid>

    </template>
    {% endblock %}

    {% block sw_settings_product_feature_sets_modal_property_list %}
    <template v-if="showPropertyGroups">

        {% block sw_settings_product_feature_sets_modal_property_list_toolbar %}
        <div class="sw-product-feature-set-modal-property-list__toolbar">

            {% block sw_settings_product_feature_sets_modal_property_list_toolbar_search %}
            <sw-simple-search-field
                v-model:value="term"
                size="small"
                variant="form"
                @search-term-change="onSearchPropertyGroups"
            />
            {% endblock %}

        </div>
        {% endblock %}

        <sw-data-grid
            ref="propertyGroupGrid"
            :data-source="propertyGroups"
            :columns="propertyGroupColumns"
            :show-selection="true"
            :show-actions="false"
            :is-loading="valuesLoading"
            identifier="sw-product-feature-set-modal-property-list"
            @selection-change="setFeatureSelection"
        >

            {% block sw_settings_product_feature_sets_modal_property_list_column_property %}
            <template #column-id="{ item }">
                {{ item.name }}
            </template>
            {% endblock %}

            {% block sw_settings_product_feature_sets_modal_property_list_pagination %}
            <template #pagination>
                <sw-pagination
                    v-if="propertyGroupTotal > propertyGroupCriteria.limit"
                    :total="propertyGroupTotal"
                    :limit="propertyGroupCriteria.limit"
                    :page="propertyGroupCriteria.page"
                    :auto-hide="false"
                    @page-change="paginatePropertyGroupGrid"
                />
            </template>
            {% endblock %}

        </sw-data-grid>

    </template>
    {% endblock %}

    {% block sw_settings_product_feature_sets_modal_product_information_list %}
    <template v-if="showProductInfo">

        {% block sw_settings_product_feature_sets_modal_product_information_list_toolbar %}{% endblock %}

        <sw-data-grid
            :data-source="productInfo"
            :columns="productInformationColumns"
            :show-selection="true"
            :show-actions="false"
            :is-loading="valuesLoading"
            identifier="sw-product-feature-set-modal-product-information-list"
            @selection-change="setFeatureSelection"
        >

            {% block sw_settings_product_feature_sets_modal_product_informationlist_column_property %}
            <template #column-id="{ item }">
                {{ item.name }}
            </template>
            {% endblock %}

        </sw-data-grid>

    </template>
    {% endblock %}

    {% block sw_settings_product_feature_sets_modal_footer %}
    <template #modal-footer>

        {% block sw_settings_product_feature_sets_modal_footer_cancel %}
        <mt-button
            size="small"
            variant="secondary"
            @click="$emit('modal-close')"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_settings_product_feature_sets_modal_footer_button_add %}
        <mt-button
            v-if="!showPageOne | referencePriceSelected"
            variant="primary"
            size="small"
            :disabled="addButtonDisabled"
            @click="onConfirm"
        >
            {{ $tc('global.default.add') }}
        </mt-button>
        {% endblock %}

        {% block sw_settings_product_feature_sets_modal_footer_button_next %}
        <mt-button
            v-if="showNextButton"
            variant="primary"
            size="small"
            :disabled="nextButtonDisabled"
            @click="onClickNext"
        >
            {{ $tc('sw-settings-product-feature-sets.modal.buttonNext') }}
        </mt-button>
        {% endblock %}

    </template>
    {% endblock %}

</sw-modal>
{% endblock %}
